{{ 'section-image-banner.css' | asset_url | stylesheet_tag }}

{%- if section.settings.adapt_height_first_image and section.settings.image != blank -%}
  {%- style -%}
  @media screen and (max-width: 749px) {
    #Banner-{{ section.id }}::before,
    #Banner-{{ section.id }} .banner__media::before,
    #Banner-{{ section.id }}:not(.banner--mobile-bottom) .banner__content::before {
      padding-bottom: {{ 1 | divided_by: section.settings.image.aspect_ratio | times: 100 }}%;
      content: '';
      display: block;
    }
  }

  @media screen and (min-width: 750px) {
    #Banner-{{ section.id }}::before,
    #Banner-{{ section.id }} .banner__media::before {
      padding-bottom: {{ 1 | divided_by: section.settings.image.aspect_ratio | times: 100 }}%;
      content: '';
      display: block;
    }
  }
  {%- endstyle -%}
{%- endif -%}

{%- style -%}
  #Banner-{{ section.id }}::after {
    opacity: {{ section.settings.image_overlay_opacity | divided_by: 100.0 }};
  }
{%- endstyle -%}

<div class="c-banner">
    <div id="Banner-{{ section.id }}" class="banner{% if section.settings.stack_images_on_mobile and section.settings.image != blank and section.settings.image_2 != blank %} banner--stacked{% endif %}{% if section.settings.adapt_height_first_image and section.settings.image != blank %} banner--adapt{% endif %}{% if section.settings.show_text_below %} banner--mobile-bottom{%- endif -%}{% if section.settings.show_text_box == false %} banner--desktop-transparent{% endif %}">
  

        {%- if section.settings.image != blank -%}
        <div class="pc_banner banner__media media{% if section.settings.image == blank and section.settings.image_2 == blank %} placeholder{% endif %}{% if section.settings.image_2 != blank %} banner__media-half{% endif %}">
          <img
            srcset="{%- if section.settings.image.width >= 3000 -%}{{ section.settings.image | img_url: '3000x' }} 3000w,{%- endif -%}
              {%- if section.settings.image.width >= 3840 -%}{{ section.settings.image | img_url: '3840x' }} 3840w,{%- endif -%}
              {{ section.settings.image | img_url: 'master' }} {{ section.settings.image.width }}w"
            sizes="{% if section.settings.image_2 != blank and section.settings.stack_images_on_mobile %}(min-width: 750px) 50vw, 100vw{% elsif section.settings.image_2 != blank %}50vw{% else %}100vw{% endif %}"
            src="{{ section.settings.image | img_url: '1500x' }}"
            loading="lazy"
            alt="{{ section.settings.image.alt | escape }}"
            width="{{ section.settings.image.width }}"
            height="{{ section.settings.image.width | divided_by: section.settings.image.aspect_ratio }}"
            {% if section.settings.image_2 != blank %}class="banner__media-image-half"{% endif %}
          >
        </div>
      {%- elsif section.settings.image_2 == blank -%}
        <div class="pc_banner banner__media media{% if section.settings.image == blank and section.settings.image_2 == blank %} placeholder{% endif %}{% if section.settings.image_2 != blank %} banner__media-half{% endif %}">
          {{ 'lifestyle-2' | placeholder_svg_tag: 'placeholder-svg' }}
        </div>
      {%- endif -%}
      {%- if section.settings.image_2 != blank -%}
        <div class="pc_banner banner__media media{% if section.settings.image != blank %} banner__media-half{% endif %}">
          <img
            srcset="{%- if section.settings.image_2.width >= 750 -%}{{ section.settings.image_2 | img_url: '750x' }} 750w,{%- endif -%}
              {%- if section.settings.image_2.width >= 1260 -%}{{ section.settings.image_2 | img_url: '1260x' }} 1260w,{%- endif -%}
              {%- if section.settings.image_2.width >= 1440 -%}{{ section.settings.image_2 | img_url: '1440x' }} 1440w,{%- endif -%}
              {%- if section.settings.image_2.width >= 1780 -%}{{ section.settings.image_2 | img_url: '1780x' }} 1780w,{%- endif -%}
              {%- if section.settings.image_2.width >= 1903 -%}{{ section.settings.image_2 | img_url: '1903x' }} 1903w,{%- endif -%}
              {%- if section.settings.image_2.width >= 2000 -%}{{ section.settings.image_2 | img_url: '2000x' }} 2000w,{%- endif -%}
              {%- if section.settings.image_2.width >= 3000 -%}{{ section.settings.image_2 | img_url: '3000x' }} 3000w,{%- endif -%}
              {%- if section.settings.image_2.width >= 3840 -%}{{ section.settings.image_2 | img_url: '3840x' }} 3840w,{%- endif -%}
              {{ section.settings.image_2 | img_url: 'master' }} {{ section.settings.image_2.width }}w"
            sizes="{% if section.settings.image != blank and section.settings.stack_images_on_mobile %}(min-width: 750px) 50vw, 100vw{% elsif section.settings.image != blank %}50vw{% else %}100vw{% endif %}"
            src="{{ section.settings.image_2 | img_url: '1500x' }}"
            loading="lazy"
            alt="{{ section.settings.image_2.alt | escape }}"
            width="{{ section.settings.image_2.width }}"
            height="{{ section.settings.image_2.width | divided_by: section.settings.image_2.aspect_ratio }}"
            {% if section.settings.image != blank %}class="banner__media-image-half"{% endif %}
          >
        </div>
      {%- endif -%} 
      
      
         {%- if section.settings.image_mobile != blank -%}  
            <div class="image_mobile banner__media media{% if section.settings.image_mobile == blank and section.settings.image_2 == blank %} placeholder{% endif %}{% if section.settings.image_2 != blank %} banner__media-half{% endif %}">
              <img
                srcset="{%- if section.settings.image_mobile.width >= 375 -%}{{ section.settings.image_mobile | img_url: '375x' }} 375w,{%- endif -%}
                  {%- if section.settings.image_mobile.width >= 412 -%}{{ section.settings.image_mobile | img_url: '412x' }} 412w,{%- endif -%}
                  {%- if section.settings.image_mobile.width >= 750 -%}{{ section.settings.image_mobile | img_url: '750x' }} 750w,{%- endif -%}
                  {%- if section.settings.image_mobile.width >= 1100 -%}{{ section.settings.image_mobile | img_url: '1100x' }} 1100w,{%- endif -%}
                  {%- if section.settings.image_mobile.width >= 1500 -%}{{ section.settings.image_mobile | img_url: '1500x' }} 1500w,{%- endif -%}
                  {%- if section.settings.image_mobile.width >= 1780 -%}{{ section.settings.image_mobile | img_url: '1780x' }} 1780w,{%- endif -%}
                  {%- if section.settings.image_mobile.width >= 1903 -%}{{ section.settings.image_mobile | img_url: '1903x' }} 1903w,{%- endif -%}
                  {{ section.settings.image_mobile | img_url: 'master' }} {{ section.settings.image_mobile.width }}w"
                sizes="{% if section.settings.image_2 != blank and section.settings.stack_images_on_mobile %}(min-width: 750px) 50vw, 100vw{% elsif section.settings.image_2 != blank %}50vw{% else %}100vw{% endif %}"
                src="{{ section.settings.image_mobile | img_url: '1500x' }}"
                loading="lazy"
                alt="{{ section.settings.image_mobile.alt | escape }}"
                width="{{ section.settings.image_mobile.width }}"
                height="{{ section.settings.image_mobile.width | divided_by: section.settings.image_mobile.aspect_ratio }}"
                {% if section.settings.image_2 != blank %}class="banner__media-image-half"{% endif %}
              >
          
           </div>
         {%- endif -%} 
      
      
        <div class="banner__content banner__content--{{ section.settings.desktop_text_box_position }} page-width">
          <div class="banner__box color-{{ section.settings.color_scheme }}">
            {%- for block in section.blocks -%}
              {%- case block.type -%}
                {%- when 'heading' -%}
                  <h2 class="banner__heading {% if block.settings.heading_size == 'medium' %}h1{% else %}h0{% endif %}" {{ block.shopify_attributes }}>
                    {{ block.settings.heading }}
                  </h2>
                {%- when 'text' -%}
                  <div class="banner__text" {{ block.shopify_attributes }}>
                    {{ block.settings.text }}
                  </div>
                  {%- when 'feature' -%}
                  <div class="feature-tenways" {{ block.shopify_attributes }}>
                    <div class="feature">
                      <div>
                        {%- if block.settings.html_1 != blank -%}
                        {{ block.settings.html_1 }}
                        {%- endif -%}
                      </div>
                      <div>
                        {%- if block.settings.html_2 != blank -%}
                        {{ block.settings.html_2 }}
                        {%- endif -%}
                      </div>
                      <div>
                        {%- if block.settings.html_3 != blank -%}
                        {{ block.settings.html_3 }}
                        {%- endif -%}
                      </div>
                      <div>
                        {%- if block.settings.html_4 != blank -%}
                        {{ block.settings.html_4 }}
                        {%- endif -%}
                      </div>
                    </div>
                  </div>
                {%- when 'buttons' -%}

                  <div class="ten-button banner__buttons{% if block.settings.button_label_1 != blank and block.settings.button_link_1 != blank and block.settings.button_label_2 != blank and block.settings.button_link_2 != blank %} banner__buttons--multiple{% endif %}" {{ block.shopify_attributes }}>
                    {%- if block.settings.button_label_1 != blank -%}
                      <a{% if block.settings.button_link_1 != blank %} href="{{ block.settings.button_link_1 }}"{% endif %} class="tenways_button-hover button{% if block.settings.button_style_secondary_1 %} button--secondary{% else %} button--primary{% endif %}"{% if block.settings.button_link_1 == blank %} aria-disabled="true"{% endif %}> {{ block.settings.button_label_1 | escape }} </a>
                    {%- endif -%}
                    {%- if block.settings.button_label_2 != blank -%}
                      <a{% if block.settings.button_link_2 != blank %} href="{{ block.settings.button_link_2 }}"{% endif %} class="ten-hover ten-button2 button{% if block.settings.button_style_secondary_2 %} button--secondary{% else %} button--primary{% endif %}"{% if block.settings.button_link_2 == blank %} aria-disabled="true"{% endif %}> <span>{{ block.settings.button_label_2 | escape }}</span> </a>
                    {%- endif -%}
                  </div>
              {%- endcase -%}
            {%- endfor -%}
          </div>
        </div>
      </div>
</div>

{% schema %}
{
  "name": "C banner",
  "tag": "section",
  "class": "spaced-section spaced-section--full-width banner-first",
  "settings": [
    {
      "type": "image_picker",
      "id": "image",
      "label": "t:sections.image-banner.settings.image.label"
    },
    {
      "type": "image_picker",
      "id": "image_2",
      "label": "t:sections.image-banner.settings.image_2.label"
    },
    {
      "type": "image_picker",
      "id": "image_mobile",
      "label": "Mobile image"
    },
    {
      "type": "checkbox",
      "id": "hidden_mobile",
      "default": false,
      "label": "Show mobile images"
    },
    {
      "type": "checkbox",
      "id": "adapt_height_first_image",
      "default": false,
      "label": "t:sections.image-banner.settings.adapt_height_first_image.label"
    },
    {
      "type": "select",
      "id": "desktop_text_box_position",
      "options": [
        {
          "value": "flex-start",
          "label": "t:sections.image-banner.settings.desktop_text_box_position.options__1.label"
        },
        {
          "value": "center",
          "label": "t:sections.image-banner.settings.desktop_text_box_position.options__2.label"
        },
        {
          "value": "flex-end",
          "label": "t:sections.image-banner.settings.desktop_text_box_position.options__3.label"
        }
      ],
      "default": "center",
      "label": "t:sections.image-banner.settings.desktop_text_box_position.label"
    },
    {
      "type": "checkbox",
      "id": "show_text_box",
      "default": true,
      "label": "t:sections.image-banner.settings.show_text_box.label"
    },
    {
      "type": "range",
      "id": "image_overlay_opacity",
      "min": 0,
      "max": 100,
      "step": 10,
      "unit": "%",
      "label": "t:sections.image-banner.settings.image_overlay_opacity.label",
      "default": 0
    },
    {
      "type": "select",
      "id": "color_scheme",
      "options": [
        {
          "value": "accent-1",
          "label": "t:sections.image-banner.settings.color_scheme.options__1.label"
        },
        {
          "value": "accent-2",
          "label": "t:sections.image-banner.settings.color_scheme.options__2.label"
        },
        {
          "value": "background-1",
          "label": "t:sections.image-banner.settings.color_scheme.options__3.label"
        },
        {
          "value": "background-2",
          "label": "t:sections.image-banner.settings.color_scheme.options__4.label"
        },
        {
          "value": "inverse",
          "label": "t:sections.image-banner.settings.color_scheme.options__5.label"
        }
      ],
      "default": "background-1",
      "label": "t:sections.image-banner.settings.color_scheme.label",
      "info": "t:sections.image-banner.settings.color_scheme.info"
    },
    {
      "type": "header",
      "content": "t:sections.image-banner.settings.header.content"
    },
    {
      "type": "checkbox",
      "id": "stack_images_on_mobile",
      "default": true,
      "label": "t:sections.image-banner.settings.stack_images_on_mobile.label"
    },
    {
      "type": "checkbox",
      "id": "show_text_below",
      "default": true,
      "label": "t:sections.image-banner.settings.show_text_below.label"
    }
  ],
  "blocks": [
    {
      "type": "heading",
      "name": "t:sections.image-banner.blocks.heading.name",
      "limit": 1,
      "settings": [
        {
          "type": "richtext",
          "id": "heading",
          "default": "<p>Image banner</p>",
          "label": "t:sections.image-banner.blocks.heading.settings.heading.label"
        },
        {
          "type": "select",
          "id": "heading_size",
          "options": [
            {
              "value": "medium",
              "label": "t:sections.image-banner.blocks.heading.settings.heading_size.options__1.label"
            },
            {
              "value": "large",
              "label": "t:sections.image-banner.blocks.heading.settings.heading_size.options__2.label"
            }
          ],
          "default": "medium",
          "label": "t:sections.image-banner.blocks.heading.settings.heading_size.label"
        }
      ]
    },
    {
      "type": "text",
      "name": "t:sections.image-banner.blocks.text.name",
      "limit": 1,
      "settings": [
        {
          "type": "richtext",
          "id": "text",
          "default": "<p>image banner</p>",
          "label": "t:sections.image-banner.blocks.text.settings.text.label"
        }
      ]
    },
    {
      "type": "feature",
      "name": "feature",
      "limit": 1,
      "settings": [
      {
        "type": "html",
        "id": "html_1",
        "label": "html_1"
      },
      {
        "type": "html",
        "id": "html_2",
        "label": "html_2"
      },
      {
        "type": "html",
        "id": "html_3",
        "label": "html_3"
      },
      {
        "type": "html",
        "id": "html_4",
        "label": "html_4"
      }
      ]
    },
    {
      "type": "buttons",
      "name": "t:sections.image-banner.blocks.buttons.name",
      "limit": 1,
      "settings": [
        {
          "type": "text",
          "id": "button_label_1",
          "default": "Button label",
          "label": "t:sections.image-banner.blocks.buttons.settings.button_label_1.label",
          "info": "t:sections.image-banner.blocks.buttons.settings.button_label_1.info"
        },
        {
          "type": "url",
          "id": "button_link_1",
          "label": "t:sections.image-banner.blocks.buttons.settings.button_link_1.label"
        },
        {
          "type": "checkbox",
          "id": "button_style_secondary_1",
          "default": false,
          "label": "t:sections.image-banner.blocks.buttons.settings.button_style_secondary_1.label"
        },
        {
          "type": "text",
          "id": "button_label_2",
          "default": "Button label",
          "label": "t:sections.image-banner.blocks.buttons.settings.button_label_2.label",
          "info": "t:sections.image-banner.blocks.buttons.settings.button_label_2.info"
        },
        {
          "type": "url",
          "id": "button_link_2",
          "label": "t:sections.image-banner.blocks.buttons.settings.button_link_2.label"
        },
        {
          "type": "checkbox",
          "id": "button_style_secondary_2",
          "default": false,
          "label": "t:sections.image-banner.blocks.buttons.settings.button_style_secondary_2.label"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "C banner",
      "blocks": [
        {
          "type": "heading"
        },
        {
          "type": "text"
        },
        {
          "type": "feature"
        },
        {
          "type": "buttons"
        }
      ]
    }
  ]
}
{% endschema %}
